<script>
			var module_inits = [];
			
			function load_init_modules() {
				for (var i = 0; i < module_inits.length; i++) {
					module_inits[i]();
				}
			}
			
			function call_me(fun) {
				module_inits.push(fun);
			}
			onload = load_init_modules;
		</script>

		<script>
            var slider_images_url = [
                {volist name='pics' id='vo'}
                '{$vo.url}',
                {/volist}
            ];
            var e_desc = '{$title}';
		</script>


<style type="text/css">
	
*
{
    padding: 0px;
    margin: 0px;
    -webkit-box-sizing: border-box;
}

body
{
    background-color: black;
}

#container
{
    width: 500px;
    height: 100%;
    position: absolute;
    overflow: hidden;
}
#container > div,#container > img 
{
    position: absolute;
}
#leaf1
{
    left: 0px;
    top: 7px;
    -webkit-transform: translate(-72px,-76px);
}
#leaf2
{
    left: 0px;
    top: 577px;
    -webkit-transform: translate(-112px,-89px);
}
#leaf3
{
    left: 425px;
    top: 64px;
    -webkit-transform: translate(78px,-65px);
}
#leaf4
{
    left: 250px;
    top: 0px;
    -webkit-transform: translate(0px,-42px);
}
#leaf5
{
    left: 364px;
    top: 679px;
    -webkit-transform: translate(142px,-98px);
}
.page
{
    width: 500px;
    height: 815px;
}
.page > div,.page > img
{
    position: absolute;
}
#word1
{
    left: 105px;
    top: 52px;
    opacity: 0;
}
#hat
{
    left: 342px;
    top: 23px;
    -webkit-transform: rotate(-14deg);
    opacity: 0;
}
#plane11
{
    left: 37px;
    top: 55px;
    opacity: 0;
}
#plane12
{
    left: 86px;
    top: 534px;
    opacity: 0;
}
#en1
{
    left: 180px;
    top: 611px;
    opacity: 0;
}
#font1
{
    left: 216px;
    top: 147px;
    opacity: 0;
}
#div1v
{
    width: 400px;
    height: 600px;
    top: 109px;
    left: 51px;
    border: 10px solid #fff;
    -webkit-transform: rotate(-3deg);
    background-color: #9c9c9c;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    opacity: 0;
    overflow: hidden;
}
#div1h
{
    width: 460px;
    height: 350px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 10px solid #fff;
    -webkit-transform: rotate(-3deg);
    left: 18px;
    top: 211px;
    background-color: #9c9c9c;
    opacity: 0;
    overflow: hidden;
}
#word2
{
    left: 139px;
    top: 39px;
    opacity: 0;
}
#en2
{
    left: 123px;
    top: 678px;
    opacity: 0;
}
#font2
{
    left: 152px;
    top: 154px;
    opacity: 0;
}
#plane2
{
    left: 356px;
    top: 0px;
    opacity: 0;
}
#div21h
{
    width: 360px;
    height: 243px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 6px solid #fff;
    -webkit-transform: rotate(-3deg);
    left: 74px;
    top: 179px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#div21v
{
    width: 255px;
    height: 342px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 6px solid #fff;
    -webkit-transform: rotate(-3deg);
    left: 35px;
    top: 97px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#div22h
{
    width: 376px;
    height: 250px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 7px solid #fff;
    -webkit-transform: rotate(5deg);
    left: 60px;
    top: 425px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#div22v
{
    width: 253px;
    height: 351px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 7px solid #fff;
    -webkit-transform: rotate(5deg);
    left: 205px;
    top: 377px;
    background-color: #9c9c9c;
     opacity: 0;
     overflow: hidden;
}
#word3
{
    left: 117px;
    top: 55px;
    opacity: 0;
}
#en3
{
    left: 77px;
    top: 630px;
    opacity: 0;
}
#plane3
{
    left: 82px;
    top: 566px;
    opacity: 0;
}
#div3v
{
    width: 381px;
    height: 520px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 7px solid #fff;
    border-bottom: 40px solid #fff;
    -webkit-transform: rotate(1deg);
    left: 62px;
    top: 112px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#div3h
{
    width: 450px;
    height: 370px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 8px solid #fff;
    border-bottom: 60px solid #fff;
    -webkit-transform: rotate(1deg);
    left: 24px;
    top: 162px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#word4
{
    left: 25px;
    top: 29px;
    opacity: 0;
}
#font4
{
    left: 21px;
    top: 148px;
    opacity: 0;
}
#en4
{
    left: 260px;
    top: 358px;
    opacity: 0;
}
#plane41
{
    left: 360px;
    top: 569px;
    opacity: 0;
}
#plane42
{
    left: 24px;
    top: 182px;
    opacity: 0;
}
#div41h
{
    width: 316px;
    height: 284px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 7px solid #fff;
    border-bottom: 60px solid #fff;
    -webkit-transform: rotate(5deg);
    left: 166px;
    top: 90px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#div42h
{
    width: 384px;
    height: 255px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 8px solid #fff;
    /* border-bottom: 60px solid #fff; */
    -webkit-transform: rotate(-4deg);
    left: 62px;
    top: 425px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#div41v
{
    width: 258px;
    height: 348px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 7px solid #fff;
    /* border-bottom: 60px solid #fff; */
    -webkit-transform: rotate(5deg);
    left: 202px;
    top: 57px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#div42v
{
    width: 274px;
    height: 366px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 8px solid #fff;
    /* border-bottom: 60px solid #fff; */
    -webkit-transform: rotate(-4deg);
    left: 48px;
    top: 388px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#word5
{
    left: 221px;
    top: 628px;
    opacity: 0;
}
#en5
{
    left: 91px;
    top: 50px;
    opacity: 0;
}
#plane5
{
    left: 0px;
    top: 504px;
    opacity: 0;
}
#div5h
{
    width: 450px;
    height: 370px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 10px solid #fff;
    /*border-bottom: 60px solid #fff;*/
    /*-webkit-transform: rotate(1deg);*/
    left: 24px;
    top: 162px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#div5v
{
    width: 370px;
    height: 500px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 10px solid #fff;
    /*border-bottom: 40px solid #fff;*/
    /*-webkit-transform: rotate(1deg);*/
    left: 62px;
    top: 120px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#word6
{
    left: 299px;
    top: 80px;
    opacity: 0;
}
#plane61
{
    left: 54px;
    top: 386px;
    opacity: 0;
}
#plane62
{
    left: 230px;
    top: 118px;
    opacity: 0;
}
#en6
{
    left: 36px;
    top: 401px;
    opacity: 0;
}
#div61h
{
    width: 280px;
    height: 227px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 7px solid #fff;
    /* border-bottom: 60px solid #fff; */
    /* -webkit-transform: rotate(5deg); */
    left: 9px;
    top: 90px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#div61v
{
    width: 254px;
    height: 341px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 7px solid #fff;
    /* border-bottom: 60px solid #fff; */
    /* -webkit-transform: rotate(5deg); */
    left: 24px;
    top: 44px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden;
}
#div62h
{
    width: 334px;
    height: 261px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 7px solid #fff;
    /* border-bottom: 60px solid #fff; */
    -webkit-transform: rotate(3deg);
    left: 153px;
    top: 358px;
    background-color: #9c9c9c;
     opacity: 0; 
     overflow: hidden; 
}
#div62v
{
    width: 264px;
    height: 353px;
    box-shadow: 2px 2px 3px rgba(49, 49, 49, 0.5), -3px -3px 1px #57BCD8;
    border: 7px solid #fff;
    /* border-bottom: 60px solid #fff; */
    -webkit-transform: rotate(3deg);
    left: 201px;
    top: 347px;
    background-color: #9c9c9c;
     opacity: 0;
     overflow: hidden; 
}
.img
{
    position: absolute;
}
#leaf6
{
    left: 300px;
    top: -44px;
    width: 40px;
    /*-webkit-animation: leafing 15s 5s linear infinite;*/
}
#leaf7
{
    left: 500px;
    top: -37px;
    width: 40px;
    /*-webkit-animation: leafing 15s linear infinite;*/
}
#leaf8
{
    left: 500px;
    top: 156px;
    width: 40px;
    /*-webkit-animation: leafing 15s 10s linear infinite;*/
}
</style>

<style type="text/css">
@-webkit-keyframes leaf1_in
{
    from  {-webkit-transform: translate(-72px,-76px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes leaf1_out
{
    to    {-webkit-transform: translate(-72px,-76px);opacity: 0}
    from  {-webkit-transform: translate(0px,0px);opacity: 1}  
}
@-webkit-keyframes leaf2_in
{
    from  {-webkit-transform: translate(-112px,-89px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes leaf2_out
{
    to    {-webkit-transform: translate(-112px,-89px);opacity: 0}
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes leaf3_in
{
    from  {-webkit-transform: translate(78px,-65px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes leaf3_out
{
    to    {-webkit-transform: translate(78px,-65px);opacity: 0}
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes leaf4_in
{
    from  {-webkit-transform: translate(0px,-42px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes leaf5_in
{
    from  {-webkit-transform: translate(142px,-98px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes leaf5_out
{
    to    {-webkit-transform: translate(142px,-98px);opacity: 0}
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes fadein
{
    from  {opacity: 0}
    to    {opacity: 1}
}
@-webkit-keyframes fadeout
{
    from  {opacity: 1}
    to    {opacity: 0}
}
@-webkit-keyframes fadeinleft
{
    from  {-webkit-transform: translate(-80px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes fadeoutleft
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(80px,0px);opacity: 0}
}
@-webkit-keyframes fadeinright
{
    from  {-webkit-transform: translate(80px,0px);opacity: 0}
    to    {-webkit-transform: translate(0px,0px);opacity: 1}
}
@-webkit-keyframes fadeoutright
{
    from  {-webkit-transform: translate(0px,0px);opacity: 1}
    to    {-webkit-transform: translate(-80px,0px);opacity: 0}
}
@-webkit-keyframes div1_in
{
    from  {-webkit-transform: translate(-150px,30px) rotate(-3deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px) rotate(-3deg);opacity: 1}
}
@-webkit-keyframes div1_out
{
    from  {-webkit-transform: translate(0px,0px) rotate(-3deg);opacity: 1}
    to    {-webkit-transform: translate(150px,-30px) rotate(-3deg);opacity: 0}
}
@-webkit-keyframes hat_in
{
    0%  {-webkit-transform: translate(0px,-100px) rotate(-14deg);opacity: 0}
    80% {-webkit-transform: translate(0px,0px) rotate(-14deg);opacity: 1}
    100% {-webkit-transform: translate(0px,0px) rotate(0deg);opacity: 1}
}
@-webkit-keyframes div22_in
{
    from  {-webkit-transform: translate(150px,50px) rotate(5deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px) rotate(5deg);opacity: 1}
}
@-webkit-keyframes div22_out
{
    from  {-webkit-transform: translate(0px,0px) rotate(5deg);opacity: 1}
    to    {-webkit-transform: translate(-150px,-50px) rotate(5deg);opacity: 0}
}
@-webkit-keyframes div41_in
{
    from  {-webkit-transform: translate(150px,0px) rotate(5deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px) rotate(5deg);opacity: 1}
}
@-webkit-keyframes div41_out
{
    from  {-webkit-transform: translate(0px,0px) rotate(5deg);opacity: 1}
    to    {-webkit-transform: translate(150px,0px) rotate(5deg);opacity: 0}
}
@-webkit-keyframes div42_in
{
    from  {-webkit-transform: translate(-150px,0px) rotate(-4deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px) rotate(-4deg);opacity: 1}
}
@-webkit-keyframes div42_out
{
    from  {-webkit-transform: translate(0px,0px) rotate(-4deg);opacity: 1}
    to    {-webkit-transform: translate(-150px,0px) rotate(-4deg);opacity: 0}
}
@-webkit-keyframes div62_in
{
    from  {-webkit-transform: translate(150px,0px) rotate(3deg);opacity: 0}
    to    {-webkit-transform: translate(0px,0px) rotate(3deg);opacity: 1}
}
@-webkit-keyframes div62_out
{
    from  {-webkit-transform: translate(0px,0px) rotate(3deg);opacity: 1}
    to    {-webkit-transform: translate(150px,0px) rotate(3deg);opacity: 0}
}
@-webkit-keyframes leafing
{
    from  {-webkit-transform: translate(0px,0px) rotate(0deg);}
    to    {-webkit-transform: translate(-550px,850px) rotate(400deg);}
}
</style>

<div id='container'>
    <!-- <img src='__DIR__{$dir}/img/6.jpg'> -->

    <img src='__DIR__{$dir}/img/bg.jpg'>

    <div id='page1' class='page'>
        <img id='word1' src='__DIR__{$dir}/img/biyeji.png'>
        <img id='hat' src='__DIR__{$dir}/img/hat.png'>
        <img id='plane11' src='__DIR__{$dir}/img/plane1.png'>
        <img id='plane12' src='__DIR__{$dir}/img/plane2.png'>
        <img id='en1' src='__DIR__{$dir}/img/english.png'>
        <img id='font1' src='__DIR__{$dir}/img/font1.png'>

        <div id='div1v'>
            <img id='img1v' class='img'>
        </div>
        <div id='div1h'>
            <img id='img1h' class='img'>
        </div>

    </div>

    <div id='page2' class='page'>
        <img id='word2' src='__DIR__{$dir}/img/qingchun.png'>
        <img id='plane2' src='__DIR__{$dir}/img/plane3.png'>
        <img id='en2' src='__DIR__{$dir}/img/english2.png'>
        <img id='font2' src='__DIR__{$dir}/img/font2.png'>

        <div id='div22v'>
            <img id='img22v' class='img'>
        </div>
        <div id='div22h'>
            <img id='img22h' class='img'>
        </div>
        <div id='div21v'>
            <img id='img21v' class='img'>
        </div>
        <div id='div21h'>
            <img id='img21h' class='img'>
        </div>

    </div>

    <div id='page3' class='page'>
        <img id='word3' src='__DIR__{$dir}/img/yiqi.png'>
        <img id='en3' src='__DIR__{$dir}/img/english3.png'>
        <img id='plane3' src='__DIR__{$dir}/img/plane4.png'>
        <div id='div3h'>
            <img id='img3h' class='img'>
        </div>
        <div id='div3v'>
            <img id='img3v' class='img'>
        </div>
    </div>

    <div id='page4' class='page'>
        <img id='word4' src='__DIR__{$dir}/img/sanchang.png'>
        <img id='en4' src='__DIR__{$dir}/img/english4.png'>
        <img id='plane41' src='__DIR__{$dir}/img/plane5.png'>
        <img id='plane42' src='__DIR__{$dir}/img/plane6.png'>
        <img id='font4' src='__DIR__{$dir}/img/font3.png'>

        <div id='div41h'>
            <img id='img41h' class='img'>
        </div>
        <div id='div42h'>
            <img id='img42h' class='img'>
        </div>
        <div id='div41v'>
            <img id='img41v' class='img'>
        </div>
        <div id='div42v'>
            <img id='img42v' class='img'>
        </div>
    </div>

    <div id='page5' class='page'>
        <img id='word5' src='__DIR__{$dir}/img/naxie.png'>
        <img id='en5' src='__DIR__{$dir}/img/english5.png'>
        <img id='plane5' src='__DIR__{$dir}/img/plane7.png'>
        <div id='div5h'>
            <img id='img5h' class='img'>
        </div>
        <div id='div5v'>
            <img id='img5v' class='img'>
        </div>
    </div>

    <div id='page6' class='page'>
        <img id='word6' src='__DIR__{$dir}/img/biye.png'>
        <img id='plane61' src='__DIR__{$dir}/img/plane8.png'>
        <img id='plane62' src='__DIR__{$dir}/img/planr7.png'>
        <img id='en6' src='__DIR__{$dir}/img/english6.png'>
        <div id='div61h'>
            <img id='img61h' class='img'>
        </div>
        <div id='div62h'>
            <img id='img62h' class='img'>
        </div>
        <div id='div61v'>
            <img id='img61v' class='img'>
        </div>
        <div id='div62v'>
            <img id='img62v' class='img'>
        </div>
    </div>

    <div id='pagetitle' style='position:absolute;width:420px;height:230px;top:222px;left:40px;background-color:rgba(255,255,255,0.5);opacity:0'>
        <div style='position:absolute;width:380px;height:190px;top:20px;left:20px;overflow:hidden;display:table;border:1px solid #24B8DC;padding: 10px 10px 10px 10px;overflow:hidden;'>
            <!-- <div style='position:absolute;width:410px;height:200px;display:table;overflow:hidden;'> -->
                <div id='titlecontent' style='width:360px;height:170px;vertical-align:middle;display:table-cell;text-align:center;font-size:30px;line-height:50px;color:#00ACD6;overflow:hidden;'></div>
            <!-- </div> -->
        </div>
    </div>


    <img id='leaf1' src='__DIR__{$dir}/img/leaf1.png'>
    <img id='leaf2' src='__DIR__{$dir}/img/leaf2.png'>
    <img id='leaf3' src='__DIR__{$dir}/img/leaf3.png'>
    <img id='leaf4' src='__DIR__{$dir}/img/leaf4.png'>
    <img id='leaf5' src='__DIR__{$dir}/img/leaf5.png'>

    <img id='leaf6' src='__DIR__{$dir}/img/leaf5.png'>
    <img id='leaf7' src='__DIR__{$dir}/img/leaf5.png'>
    <img id='leaf8' src='__DIR__{$dir}/img/leaf5.png'>


</div>

<script>
function id(name)
{
    return document.getElementById(name);
}
var inter1;
var inter2;
function showtitle()
{
    id('leaf1').style.webkitAnimation = 'leaf1_in 2s ease-out both';
    id('leaf2').style.webkitAnimation = 'leaf2_in 2s ease-out both';
    id('leaf3').style.webkitAnimation = 'leaf3_in 2s ease-out both';
    id('leaf4').style.webkitAnimation = 'leaf4_in 2s ease-out both';
    id('leaf5').style.webkitAnimation = 'leaf5_in 2s ease-out both';

    id('pagetitle').style.webkitAnimation = 'fadein 2s linear both';

    fontcontent = id('titlecontent');
    fontindex= 0;

    timeout[1] = setTimeout(function()
    {
        inter1 = setInterval(showword,250)
    },500)
}

function showword()
{
    fontcontent.innerHTML = fontcontent.innerHTML + e_desc[fontindex];
    fontindex ++;
    if(fontindex == e_desc.length)
    {
        clearInterval(inter1);

        showfont = true;
    }
}

function liangziyun_kawa()
{
    if(showfont == true)
        beginshow()
    else
        inter2 = setInterval(checkshow,1000)
}

function checkshow()
{
    if(showfont == true)
    {
        clearInterval(inter2);
        beginshow();
    }
        
}

function beginshow()
{
    id('pagetitle').style.webkitAnimation = 'fadeout 1s 1s linear both';

    id('leaf1').style.webkitAnimation = 'leaf1_out 1s 1s ease-out both';
    id('leaf2').style.webkitAnimation = 'leaf2_out 1s 1s ease-out both';
    id('leaf3').style.webkitAnimation = 'leaf3_out 1s 1s ease-out both';
    id('leaf5').style.webkitAnimation = 'leaf5_out 1s 1s ease-out both';

    id('leaf6').style.webkitAnimation = 'leafing 15s 5s linear infinite';
    id('leaf7').style.webkitAnimation = 'leafing 15s linear infinite';
    id('leaf8').style.webkitAnimation = 'leafing 15s 10s linear infinite';


    timeout[2] = setTimeout(show1,2000)
}

function show1()
{
    setImage('1');
    id('word1').style.webkitAnimation = 'fadeinright 1.5s ease-out both';
    id('font1').style.webkitAnimation = 'fadeinright 1.5s ease-out both';
    id('en1').style.webkitAnimation = 'fadeinright 1.5s ease-out both';

    id('plane11').style.webkitAnimation = 'fadeinleft 1.5s ease-out both';
    id('plane12').style.webkitAnimation = 'fadeinleft 1.5s ease-out both';
    id('div1h').style.webkitAnimation = 'div1_in 1.5s ease-out both';
    id('div1v').style.webkitAnimation = 'div1_in 1.5s ease-out both';
    id('hat').style.webkitAnimation = 'hat_in 1s 2s linear both';

    timeout[3] = setTimeout(clear1,5000)
}

function clear1()
{
    id('word1').style.webkitAnimation = 'fadeoutright 1.5s ease-in both';
    id('font1').style.webkitAnimation = 'fadeoutright 1.5s ease-in both';
    id('en1').style.webkitAnimation = 'fadeoutright 1.5s ease-in both';

    id('plane11').style.webkitAnimation = 'fadeoutleft 1.5s ease-in both';
    id('plane12').style.webkitAnimation = 'fadeoutleft 1.5s ease-in both';
    id('div1h').style.webkitAnimation = 'div1_out 1.5s ease-in both';
    id('div1v').style.webkitAnimation = 'div1_out 1.5s ease-in both';
    id('hat').style.webkitAnimation = 'fadeoutright 1.5s ease-in both';

    timeout[4] = setTimeout(show2,1500)
}

function show2()
{
    setImage('21');
    setImage('22');
    id('word2').style.webkitAnimation = 'fadein 1.5s linear both';
    id('font2').style.webkitAnimation = 'fadein 1.5s linear both';

    id('plane2').style.webkitAnimation = 'fadeinright 1.5s ease-out both';
    id('en2').style.webkitAnimation = 'fadeinleft 1.5s ease-out both';

    id('div21h').style.webkitAnimation = 'div1_in 1.5s ease-out both';
    id('div22h').style.webkitAnimation = 'div22_in 1.5s ease-out both';
    id('div21v').style.webkitAnimation = 'div1_in 1.5s ease-out both';
    id('div22v').style.webkitAnimation = 'div22_in 1.5s ease-out both';

    timeout[5] = setTimeout(clear2,5000)
}

function clear2()
{
    id('word2').style.webkitAnimation = 'fadeout 1s 1s linear both';
    id('font2').style.webkitAnimation = 'fadeout 1s 1s linear both';

    id('plane2').style.webkitAnimation = 'fadeoutright 1s 1s linear both';
    id('en2').style.webkitAnimation = 'fadeoutleft 1s 1s linear both';

    id('div21h').style.webkitAnimation = 'div1_out 1.5s ease-in both';
    id('div22h').style.webkitAnimation = 'div22_out 1.5s ease-in both';
    id('div21v').style.webkitAnimation = 'div1_out 1.5s ease-in both';
    id('div22v').style.webkitAnimation = 'div22_out 1.5s ease-in both';

    timeout[6] =setTimeout(show3,2000)
}

function show3()
{
    setImage('3');
    id('en3').style.webkitAnimation = 'fadeinright 1.5s ease-out both';
    id('plane3').style.webkitAnimation = 'fadeinleft 1.5s ease-out both';
    id('word3').style.webkitAnimation = 'fadein 1s linear both';

    id('div3v').style.webkitAnimation = 'fadein 2s linear both';
    id('div3h').style.webkitAnimation = 'fadein 2s linear both';

    timeout[7] =setTimeout(clear3,5000)
}

function clear3()
{
    id('en3').style.webkitAnimation = 'fadeoutright 1s linear both';
    id('plane3').style.webkitAnimation = 'fadeoutleft 1s linear both'
    id('word3').style.webkitAnimation = 'fadeout 1s linear both';

    id('div3v').style.webkitAnimation = 'fadeout 1s linear both';
    id('div3h').style.webkitAnimation = 'fadeout 1s linear both';

    timeout[8] = setTimeout(show4,1000)
}

function show4()
{
    setImage('41');
    setImage('42');
    id('word4').style.webkitAnimation = 'fadeinleft 1.5s ease-out both';
    id('font4').style.webkitAnimation = 'fadeinleft 1.5s ease-out both';

    id('plane42').style.webkitAnimation = 'fadeinleft 1s ease-out both';
    id('plane41').style.webkitAnimation = 'fadeinright 1s ease-out both';

    id('div41h').style.webkitAnimation = 'div41_in 1.5s ease-out both';
    id('div42h').style.webkitAnimation = 'div42_in 1.5s ease-out both';
    id('div41v').style.webkitAnimation = 'div41_in 1.5s ease-out both';
    id('div42v').style.webkitAnimation = 'div42_in 1.5s ease-out both';

    timeout[9] = setTimeout(clear4,5000)
}

function clear4()
{
    id('div41h').style.webkitAnimation = 'div41_out 1.5s ease-in both';
    id('div42h').style.webkitAnimation = 'div42_out 1.5s ease-in both';
    id('div41v').style.webkitAnimation = 'div41_out 1.5s ease-in both';
    id('div42v').style.webkitAnimation = 'div42_out 1.5s ease-in both';

    id('word4').style.webkitAnimation = 'fadeoutright 1s 1s ease-in both';
    id('font4').style.webkitAnimation = 'fadeoutright 1s ease-in both';

    id('plane42').style.webkitAnimation = 'fadeoutleft 1s 1s ease-in both';
    id('plane41').style.webkitAnimation = 'fadeoutright 1s 1s ease-in both';

    timeout[10] = setTimeout(show5,1500)
}

function show5()
{
    setImage('5');
    id('en5').style.webkitAnimation = 'fadein 1s linear both';
    id('plane5').style.webkitAnimation = 'fadeinleft 1.5s ease-out both';
    id('word5').style.webkitAnimation = 'fadeinright 1.5s ease-out both';

    id('div5h').style.webkitAnimation = 'fadein 1s 1s ease-out both';
    id('div5v').style.webkitAnimation = 'fadein 1s 1s ease-out both';

    timeout[11] = setTimeout(clear5,5000)
}

function clear5()
{
    id('en5').style.webkitAnimation = 'fadeout 1s linear both';
    id('plane5').style.webkitAnimation = 'fadeoutleft 1s linear both';
    id('word5').style.webkitAnimation = 'fadeoutright 1s linear both';

    id('div5h').style.webkitAnimation = 'fadeout 1s linear both';
    id('div5v').style.webkitAnimation = 'fadeout 1s linear both';

    timeout[12] = setTimeout(show6,1000)
}

function show6()
{
    setImage('61');
    setImage('62');
    id('word6').style.webkitAnimation = 'fadeinright 1.5s ease-out both';
    id('en6').style.webkitAnimation = 'fadeinleft 1.5s ease-out both';
    id('plane61').style.webkitAnimation = 'fadeinright 1.5s 1s ease-out both';
    id('plane62').style.webkitAnimation = 'fadeinleft 1.5s 1s ease-out both';

    id('div61h').style.webkitAnimation = 'fadeinleft 1.5s ease-out both';
    id('div62h').style.webkitAnimation = 'div62_in 1.5s ease-out both';
    id('div61v').style.webkitAnimation = 'fadeinleft 1.5s ease-out both';
    id('div62v').style.webkitAnimation = 'div62_in 1.5s ease-out both';

    timeout[13] = setTimeout(clear6,5000)
}

function clear6()
{
    id('div61h').style.webkitAnimation = 'fadeoutright 1.5s ease-in both';
    id('div62h').style.webkitAnimation = 'div62_out 1.5s ease-in both';
    id('div61v').style.webkitAnimation = 'fadeoutright 1.5s ease-in both';
    id('div62v').style.webkitAnimation = 'div62_out 1.5s ease-in both';

    id('word6').style.webkitAnimation = 'fadeoutleft 1.5s ease-in both';
    id('plane62').style.webkitAnimation = 'fadeoutleft 1.5s ease-in both';
    id('en6').style.webkitAnimation = 'fadeoutright 1.5s ease-in both';
    id('plane61').style.webkitAnimation = 'fadeoutright 1.5s ease-in both';

    timeout[14] = setTimeout(show1,1500)
}

var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var delaytime=3000;
var timeout = [];
var showfont = false;


function id (name) 
{
    return document.getElementById(name);
}

//每次执行加载后10张图片
var bl_keepload = 'first';
var step_loadnum = 5;
function step_load()
{
    var load_num = 0
    //初步加载X张
    if(image_url_index  == 0 && bl_keepload == 'first')
    {
        console.log('loading continue');
        if(slider_images_url.length > step_loadnum)
        {
            load_num = step_loadnum;
            bl_keepload = 'next';
        }
        else
        {
            load_num = slider_images_url.length;
            bl_keepload = 'end';
        }
        for(var i = 0; i< load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
    else if(bl_keepload == 'end')
    {
        return;
    }
    else
    {
         console.log('loading continue');
        if(slider_images_url.length - image_url_index >step_loadnum*2)
        { 
            load_num = step_loadnum;
        }
        else
        {
            load_num = slider_images_url.length - image_url_index - step_loadnum;
            bl_keepload = 'end';
        }
        for(var i = image_url_index +step_loadnum; i< image_url_index + step_loadnum + load_num; i++)
        {
            var img=new Image();
            img.index=i;
            img.src=slider_images_url[i];
            img.onload=image_onload;
            img.onerror= image_onerror;
            Onload_imgs_url[i] = 'loading';
        }
    }
}

function load_images()
{ 
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    canshow = true;
    showtitle();
    bl_keepload = 'first';
    // loading_first(); 
    step_load();     
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<step_loadnum)
        error_num ++;
    Onload_imgs_url[index] = 'not find';

    if((have_num+error_num >= step_loadnum || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<step_loadnum)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    console.log(Onload_imgs_url[index]);

    if((have_num + error_num >= step_loadnum ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            liangziyun_kawa();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    liangziyun_kawa();
                },dis_titletime);
        }

    }
}
var divwidth  = {'1h':460,'1v':400,'21h':360,'21v':255,'22h':376,'22v':253,'3h':450,'3v':381,'41h':316,'41v':258,'42h':384,'42v':274,'5h':450,'5v':370,'61h':280,'61v':254,'62h':334,'62v':264};
var divheight = {'1h':350,'1v':600,'21h':243,'21v':342,'22h':250,'22v':351,'3h':320,'3v':470,'41h':240,'41v':348,'42h':255,'42v':366,'5h':370,'5v':500,'61h':227,'61v':341,'62h':261,'62v':353};

function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        if(image_url_index % step_loadnum == 0)
        {
            step_load();
        }
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    if(image_url_index % step_loadnum == 0)
    {
        step_load();
    }
    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];

    var div;
    var div1;
    var img;

    if(img_bili > 1)
    {
        div = id('div'+idname + 'h');
        div1 = id('div'+idname + 'v');
        idname = idname + 'h';
    }
    else
    {
        div = id('div'+idname + 'v');
        div1 = id('div'+idname + 'h');
        idname = idname + 'v';
    }

    div.style.display = 'block';
    div1.style.display = 'none';

    var height = divheight[idname];
    var width = divwidth[idname];

    var img = id('img'+idname);
    img.src = Onload_imgs_url[image_url_index];
    console.log('setimg:'+img.src);

    if(img_bili > (width/height))
    {
        img.style.top = '0px';
        img.style.height = height + 'px';
        img.style.width = height*img_bili + 'px';
        img.style.left = -((height*img_bili-width)/2)+'px';
    }
    else
    {
        img.style.left = '0px';
        img.style.width = width+'px';
        img.style.height = width/img_bili + 'px';
        img.style.top = -((width/img_bili-height)/2) + 'px';
    }
    image_url_index ++;
    if(image_url_index == Onload_imgs_url.length)
      image_url_index = 0;
}
call_me(load_images)

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{

    for(var i = 0; i<timeout.length; i++)
    {
        clearTimeout(timeout[i])
    }

    clearInterval(inter1);
    clearInterval(inter2);

    id('titlecontent').innerHTML = '';

    var elements = ['div1h','div1v','div21h','div21v','div22h','div22v','div3v','div3h','div41h','div41v','div42h','div42v','div5h','div5v','div61h','div61v','div62h','div62v','leaf1','leaf2','leaf3','leaf4','leaf5','leaf6','leaf7','leaf8','word1','hat','plane11','plane12','en1','font1','word2','plane2','en2','font2','word3','en3','plane3','word4','en4','plane41','plane42','font4','word5','en5','plane5','word6','plane61','plane62','en6','pagetitle'];
    for(var i=0;i<elements.length;i++)
    {
        if(i <18)
            id(elements[i]).style.display = 'none';
        id(elements[i]).style.webkitAnimation = '';
    }


}
</script>



	<link type="text/css" rel="stylesheet" href="__DIR__{$dir}/css/guanzhu.css?ver=3" />
	<link rel="stylesheet" type="text/css" href="__DIR__{$dir}/css/buttons.css" />

	<style type="text/css">
		@-webkit-keyframes zhuan
		{
			0%
			{
				-webkit-transform:rotate(0deg);
			}

			100%
			{
				-webkit-transform:rotate(360deg);
			}
		}


		@-webkit-keyframes aa_out_bounce_left
		{
		    0%{
		        -webkit-transform:translateX(0)
		    }
		    20%{
		        -webkit-transform:translateX(20px)
		    }
		    100%{
		        -webkit-transform:translateX(-125px)
		    }
		}
		@-webkit-keyframes aa_in_bounce_center
		{
		    0%{
		        opacity:0;
		        -webkit-transform:scale(.3)
		    }
		    50%{
		        opacity:1;
		        -webkit-transform:scale(1.05)
		    }
		    70%{
		        -webkit-transform:scale(.9)
		    }
		    100%{
		        -webkit-transform:scale(1)
		    }
		}
		@-webkit-keyframes jinbi
		{
			from {-webkit-transform: rotateY(0deg);}
			to   {-webkit-transform: rotateY(180deg);}
		}
		.jubao-item
		{
			position: relative;
			float: left;
			width: 360px;
			height: 55px;
			top: 0px;
			font-size: 20px;
			line-height: 55px;
			margin-left: 20px;
			border-bottom: 1px solid #EBEBEB;
		}
		.jubao-radio
		{
			position: absolute;
			right: 10px;
			width: 25px;
			height: 25px;
			top: 20px;
		}

		.jubao-detail
		{
			position: relative;
			float: left;
			width: 360px;
			margin-left: 20px;
		}
		.jubao-detail textarea
		{
			width: 360px;
		    height: 80px;
		    font-size: 20px;
		    resize: none;
		    line-height: 40px;
		    border: none;
		    background-color: #eee;
		    border-radius: 10px;
		    padding-left: 10px;
		}
		@-webkit-keyframes guangzhu_ani
		{
			from  {-webkit-transform: scale(1);}
			to    {-webkit-transform: scale(1.05);}
		}
		@-webkit-keyframes che_ani
		{
		    0%    {-webkit-transform: translate(-20px,0px);opacity: 1}
		    8%  {-webkit-transform: translate(100px,0px) scale(0.95,1.05);opacity: 1}
		    10%  {-webkit-transform: translate(100px,0px) scale(1,1);opacity: 1}
		    12%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    14%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    16%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    18%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    20%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    45%   {-webkit-transform: translate(100px,0px) scale(0.97,1.03); opacity: 1}
		    50%   {-webkit-transform: translate(100px,0px); opacity: 1}
		    60%   {-webkit-transform: translate(200px,0px); opacity: 0}
		    100%  {-webkit-transform: translate(200px,0px); opacity: 0}
		}
		@-webkit-keyframes che1_ani
		{
		    0%    {opacity: 1}
		    12%   {opacity: 1}
		    14%   {opacity: 0.5}
		    16%   {opacity: 1}
		    18%   {opacity: 0.5}
		    20%   {opacity: 1}
		    100%  {opacity: 1}

		}
		@-webkit-keyframes baoming
		{
		    0%  {opacity: 0}
		    58% {opacity: 0;-webkit-transform: scale(1.4);}
		    59% {opacity: 1;-webkit-transform: scale(1.4);}
		    70% {opacity: 1;-webkit-transform: scale(0.95);}
		    72% {opacity: 1;-webkit-transform: scale(1);}
		    80% {opacity: 0.8;-webkit-transform: scale(1.1);}
		    88% {opacity: 1;-webkit-transform: scale(1);}
		    93% {opacity: 0;-webkit-transform: scale(1.3);}
		    100%{opacity: 0}
		}
		@-webkit-keyframes shijia
		{
		    0%  {-webkit-transform: rotate(20deg) scale(0.8);opacity: 0}
		    10% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    20% {-webkit-transform: rotate(20deg) scale(0.85);}
		    28% {-webkit-transform: rotate(20deg) scale(0.75);}
		    38% {-webkit-transform: rotate(20deg) scale(0.85);}
		    47% {-webkit-transform: rotate(20deg) scale(0.75);opacity: 1}
		    55% {-webkit-transform: rotate(20deg) scale(0.90);opacity: 0}
		    100%{opacity: 0}

		}
		@-webkit-keyframes biaozhi_ani
		{
		    0%  {opacity: 0}
		    10% {opacity: 0}
		    20% {opacity: 1}
		    45% {opacity: 1}
		    55% {opacity: 0}
		    100%{opacity: 0}
		}
		#musicinfo
		{
			color: #fff;
			text-shadow: 1px 1px 2px #000;
			font-size: 15px;
			position: fixed;
			left: 432px;
		    top: 82px;
		    width: 60px;
		    height: 20px;
		    z-index: 100;
		    display: none;
		    opacity: 1;
		}
		@-webkit-keyframes heart_beating
		{
			from {opacity: 1;-webkit-transform: scale(1);}
			to   {opacity: 0.8;-webkit-transform: scale(0.8);}
		}
		@-webkit-keyframes heart1_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(-20px,-50px) scale(1.5);}
		}
		@-webkit-keyframes heart2_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(20px,-60px) scale(2);}
		}
		@-webkit-keyframes heart3_moving
		{
			from  {opacity: 1;-webkit-transform: translate(0px,0px) scale(1);}
			to    {opacity: 0;-webkit-transform: translate(70px,-40px) scale(2);}
		}
#enddiv
{
    position: absolute;
    width: 500px;
    height: 815px;
    background-color: rgba(0,0,0,0.7);
    z-index: 10000;
    display: none;
    opacity: 0;
}
#title_div
{
    width: 320px;
    height: 200px;
    left: 90px;
    top: 250px;
    color: #fff;
    font-size: 25px;
    position: relative;
    line-height: 45px;
    text-align: center;
    font-family: '微软雅黑';
    display:table;
}
#title_line
{
    position: absolute;
    width: 370px;
    height: 2px;
    background-color: #fff;
    top: 415px;
    left: 65px;
}
#reshowbtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(94,159,177,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 74px;
}
#guanzhubtn
{
    position: absolute;
    width: 150px;
    height: 44px;
    border-radius: 10px;
    background-color: rgba(185,91,83,0.9);
    color: #fff;
    font-size: 22px;
    text-align: center;
    line-height: 44px;
    top: 446px;
    left: 268px;
}
@-webkit-keyframes fadein
{
	from  {opacity: 0}
	to    {opacity: 1}
}
	</style>

	
